<template>
  <div class="bg-white w-full">
    <ATable
      size="large"
      :scroll="{ x: 'max-content' }"
      :columns="tableColumns"
      :data-source="dataSource"
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"
      bordered
      sticky
    >
    </ATable>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, ref } from 'vue';
import { Table } from 'ant-design-vue';
import {
  getSingleList,
  getTenantSubscribedAppList,
} from '/@/api/maintenance-center/resource-monitor/for-tenant/resourceMonitor';
import { TableProps } from 'ant-design-vue/lib/vc-table/Table';

const tableColumns = [
  {
    title: '云服务器名称',
    dataIndex: 'name',
    width: '200px',
  },
  {
    title: '云服务器ID',
    dataIndex: 'serverId',
    width: '200px',
  },
  {
    title: '弹性公网IP',
    dataIndex: 'eip',
    width: '200px',
  },
  {
    title: 'WEBPORT',
    dataIndex: 'managePort',
    width: '200px',
  },
  {
    title: 'RDPPORT',
    dataIndex: 'rdpPort',
    width: '200px',
  },
  {
    title: '云联服务端可执行程序地址',
    dataIndex: 'cloudLinkDir',
    width: '200px',
  },
  {
    title: 'C/S程序可执行程序地址',
    dataIndex: 'appDir',
    width: '200px',
  },
];

export default defineComponent({
  components: {
    ATable: Table,
  },
  props: {
    tenantCode: String,
    appId: String,
  },
  setup(props) {
    const loading = ref(true);
    const dataSource = ref([]);
    let current = ref(1);
    let size = ref('10');
    const total = ref('0');
    const pagination = computed(() => ({
      showSizeChanger: true,
      total: total.value,
      current: current.value,
      size: size.value,
      showTotal: (total) => {
        return `共 ${total} 条`;
      },
    }));

    onMounted(() => {
      try {
        getSingleList({ tenantCode: props.tenantCode, appId: props.appId }).then((res) => {
          dataSource.value = res;
          total.value = res.length;
        });
      } finally {
        loading.value = false;
      }
    });

    const handleTableChange: TableProps['onChange'] = (pag) => {
      pagination.value.current = pag.current;
      pagination.value.size = pag.pageSize;
      getTenantSubscribedAppList({
        tenantCode: props.tenantCode,
        current: pagination.value.current,
        size: pagination.value.size,
      }).then((res) => {
        dataSource.value = res;
        total.value = res.length;
        current.value = pag.current;
        size.value = pag.pageSize;
      });
    };

    return {
      dataSource,
      pagination,
      tableColumns,
      handleTableChange,
      total,
    };
  },
});
</script>

<style lang="less" scoped>
/* 表格斑马样式 **/
/deep/ .ant-table-tbody tr:nth-child(2n) {
  background-color: #fafafa;
}
</style>
